<template>
  <div id="Statistics">
    <div class="content">
      <div class="overflow-auto">
        <div class="Statistics_body">
          <div class="StatisticsData">

            <!-- 筛选时间 -->
            <div class="screen_datepicker screen_datepicker_action">
              <el-date-picker size="small" style="width: 320px;" v-model="screenDate" type="daterange" range-separator="至"
                @change="screenDateChange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
              <i class="el-icon-date"></i> <!-- 替换为你的图标 -->
            </div>

            <!-- END筛选时间 -->

            <div class="CollectionSummary">
              <!-- 营业额概况 -->
              <div class="turnover">
                <p>记一笔概况</p>
                <el-row :gutter="20" class="other">
                  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="sum">
                      <div class="sumBox">
                        <div class="sumImg"></div>
                        <div>
                          <div class="sumName">净收入(元)</div>
                          <div class="price">￥{{ basicsData.net_income }}</div>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="sum">
                      <div class="sumBox">
                        <div class="sumImg"></div>
                        <div>
                          <div class="sumName">总收入(元)</div>
                          <div class="price">￥{{ basicsData.revenue }}</div>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="sum">
                      <div class="sumBox">
                        <div class="sumImg"></div>
                        <div>
                          <div class="sumName">总支出(元)</div>
                          <div class="price">￥{{ basicsData.expenditures }}</div>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="chartsBox">
                <div class="title" style="margin-top: 20px;">记一笔收支统计</div>
                <div class="radio">
                  <el-radio-group v-model="radio_pie" size="small" @change="radioChange">
                    <el-radio-button label="1">按项目</el-radio-button>
                    <el-radio-button label="2">按支付方式</el-radio-button>
                  </el-radio-group>
                </div>
                <el-row class="charts" :gutter="100">
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="charts_Doughnut">
                      <div id="Collection"></div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="charts_Doughnut">
                      <div id="Refund"></div>
                    </div>
                  </el-col>
                </el-row>
              </div>、
              <!-- 明细表格 -->
              <div class="detail">
                <div class="title">
                  支付方式明细
                  <span>({{ screenDate[0] }} ~ {{ screenDate[1] }})</span>
                </div>
                <!-- 支付方式选择器 -->
                <div class="detail_top">
                  <el-select v-model="value" @change="changeSelect" placeholder="请选择" size="small" style="width: 150px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <div>
                    <el-button type="primary" size="small" @click="openExport">导出报表</el-button>
                  </div>
                </div>
                <!-- 表格 -->
                <div class="eltable">
                  <el-table :data="tableData" ref="exportTable" style="width: 100%"
                    :header-cell-style="{ background: '#EBF1F6' }">
                    <el-table-column prop="date" label="时间" width="180" align="center"></el-table-column>
                    <el-table-column prop="type" label="类型" width="180" align="center"></el-table-column>
                    <el-table-column prop="project" label="项目" width="180" align="center"></el-table-column>
                    <el-table-column prop="price" label="金额" align="center"></el-table-column>
                    <el-table-column prop="date" label="收款方式" align="center"></el-table-column>
                    <el-table-column prop="room_num_id" label="关联房间" align="center"></el-table-column>
                    <el-table-column prop="date" label="凭证" align="center"></el-table-column>
                    <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
                    <el-table-column prop="date" label="操作" width="180" align="center"></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>



            <!-- 导出报表 -->
            <ExportTable now_export="记一笔汇总" :tableHeaders="tableHeaders" :tableScreen="tableScreen"
              :drawerVisible_Table="drawerVisible_Table" @update:drawerVisible_Table="handleDrawerVisible_Table">
            </ExportTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getdaysAgo } from '../../../../api/countDay'
import ExportTable from '../../../../components/exportTable/exportTable.vue'

export default {
  name: 'Statistics',
  components: {
    ExportTable
  },
  data() {
    return {
      // 导出报表组件
      drawerVisible_Table: false,
      tableHeaders: [],//表格的所有表头
      tableScreen: [],//表格筛选字段

      radio_pie: 1,//按项目 按支付方式
      isScreenDate: false,//是否筛选了时间
      isScreenDateType: 0,//类型 1代表，用户选择的时间相同，0代表用户选择的时间不同
      screenDate: [getdaysAgo(new Date(), 1, true), getdaysAgo(new Date(), 1, true)],//筛选时间
      tableHeaderData: [],//营业明细表格
      tableData: [],//营业明细表格
      pieData: [],//圆环数据
      basicsData: {},//基础数据

      revenue_pie: [],//收入
      expenditures: [],//支出

      // 选择器  
      options: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '收入 '
      }, {
        value: '2',
        label: '支出'
      }],
      value: '0',//表格	0全部 1收入 2支出
    }
  },
  created() {
    this.getTurnover()
    this.getPie()
    this.getTable()
  },

  methods: {
    /**
    * 导出明细按钮
    */
    openExport() {
      console.log(this.tableData);
      // if (this.tableData.length == 0) {
      //   this.$message.warning('没有可导出的数据！')
      //   return
      // }
      const tableHeaders = Array.from(this.$refs.exportTable.$el.querySelectorAll('th')).map(header => header.innerText).filter(item => item != '');

      const tableScreen = [
        ['开始时间', this.screenDate[0] ? this.screenDate[0] : '全部', this.screenDate[0]],
        ['结束时间', this.screenDate[1] ? this.screenDate[1] : '全部', this.screenDate[1]],
      ]
      console.log(tableHeaders, 'tableHeaders');
      console.log(tableScreen, 'tableScreen');
      this.tableHeaders = tableHeaders  // 报表字段
      this.tableScreen = tableScreen  // 筛选字段
      this.drawerVisible_Table = true;
    },
    // 更新父组件的抽屉状态 导出明细
    handleDrawerVisible_Table(value) {
      this.drawerVisible_Table = value;
    },

    // 筛选日期时间发生变化
    screenDateChange(v) {
      this.screenDate = this.screenDate == null ? [getdaysAgo(new Date(), 1, true), getdaysAgo(new Date(), 1, true)] : v
      console.log(this.screenDate, 'screenDate');
      if (this.screenDate != null) {
        this.getTurnover()
        this.getPie()
        this.getTable()
      }
    },



    // 单选按钮改变事件
    radioChange() {
      this.getPie()
    },
    // 表格支付方式明细
    changeSelect() {
      this.getTable()
    },

    //环形图表
    DoughnutChart() {
      // 收款
      let chartDom_Collection = document.getElementById('Collection')
      chartDom_Collection.removeAttribute('_echarts_instance_');

      let myChart_Collection = echarts.init(chartDom_Collection)
      let option_Collection
      option_Collection = {
        tooltip: {
          trigger: 'none',
          // trigger: 'item',
          // formatter: function (params) {
          //   return params.name + ': ' + (parseFloat(params.value) * 100).toFixed(2) + '%';
          // }
        },
        legend: {
          top: '10%',
          left: 'left',
          orient: 'vertical',   // 设置纵向排列显示
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            text: `总收入`,
            textAlign: 'center',
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            name: '收入汇总统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false // 隐藏标签
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
                formatter: function (params) {
                  return params.name + ': ' + (parseFloat(params.value) * 100).toFixed(2) + '%';
                }
                // formatter: '{b}: {c}' // 显示数据项名称和值
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      }
      option_Collection && myChart_Collection.setOption(option_Collection)

      // 退款
      let chartDom_Refund = document.getElementById('Refund')
      chartDom_Refund.removeAttribute('_echarts_instance_');

      let myChart_Refund = echarts.init(chartDom_Refund)
      let option_Refund
      option_Refund = {
        tooltip: {
          trigger: 'none',
        },
        legend: {
          top: '10%',
          left: 'left',
          orient: 'vertical',   // 设置纵向排列显示
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            text: `总支出`,
            textAlign: 'center',
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            name: '支出汇总统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false // 隐藏标签
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
                formatter: function (params) {
                  return params.name + ': ' + (parseFloat(params.value) * 100).toFixed(2) + '%';
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      }
      option_Refund && myChart_Refund.setOption(option_Refund)


      window.onresize = function () {
        myChart_Refund.resize();
        myChart_Collection.resize();
      }
    },


    // 获取数据
    getTurnover() {
      // 记一笔汇总基础数据
      let basicData = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.screenDate[0],
        end_date: this.screenDate[1]
      }
      this.my_request('supplier/statistics/remeber-basic', basicData, "GET").then(res => {
        console.log(res, '记一笔汇总基础数据');
        let { code, data } = res.data
        if (200 == code) {
          this.basicsData = data
        }
      })
    },


    // 环形数据
    getPie() {
      let pieData = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.screenDate[0],
        end_date: this.screenDate[1],
        type: this.radio_pie
      }
      console.log(this.radio_pie, 'this.radio_pie');
      this.my_request('supplier/statistics/remeber-pie', pieData, "GET").then(res => {
        console.log(res, '记一笔汇总环形数据');
        let { code, data } = res.data
        if (200 == code) {
          this.revenue_pie = data.revenue//收入
          this.expenditures = data.expenditures//支出
          this.DoughnutChart()
        }
      })
    },

    // 记一笔汇总明细表格数据
    getTable() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.screenDate[0],
        end_date: this.screenDate[1],
        type: 1,//全部 1收入 2支出
        page: 1,
        page_rows: 10
      }
      console.log(data, 'getTable');
      this.my_request('supplier/hotel-pms-account', data, 'GET').then(res => {
        console.log(res, '获取记一笔汇总表格数据');
        let { code, data } = res.data
        if (200 == code) {
          this.tableData = data.list
        }
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.eltable {
  border: 1px solid #E4E7ED;
}

.radio {
  padding: 15px 0;
}

.content {
  .overflow-auto {
    width: calc(100vw - 190px);
    height: calc(100vh - 100px);
    overflow: auto;
    padding: 20px;

    .Statistics_body {
      width: 100%;

      .turnover {
        margin: 20px 0 10px 0;

        p {
          padding-bottom: 20px;
          font-size: 16px;

          span {
            color: #999999;
            margin-left: 10px;
            font-size: 12px;
          }
        }

        .other {
          background: #ffffff;
          border-radius: 2px;
          box-shadow: 0px 4px 7px rgba(222, 222, 222, 0.5);
          margin: 0px !important;

          .sum {

            box-shadow: none !important;
            overflow: hidden;
            margin-left: 20px;

            .sumBox {
              display: flex;
              padding: 15px;

              div:nth-child(2) {
                div:nth-child(1) {
                  color: #999999;
                  font-size: 12px;
                  margin-top: -3px;
                  margin-bottom: 15px;

                }

                div:nth-child(2) {
                  font-size: 20px;
                }
              }
            }

            .sumImg {
              width: 48px;
              height: 48px;
              margin-right: 10px;
              background-color: #D8D8D8;
            }
          }
        }
      }

      .chartsBox {
        width: calc(100vw - 205px);
        overflow: hidden;
      }

      .charts {
        .title {
          height: 50px;
          line-height: 50px;
        }

        .charts_Doughnut {

          #Collection,
          #Refund {
            width: 100%;
            height: 280px;
            background-color: #ffffff;
          }
        }
      }

      .detail {
        padding-bottom: 30px;

        .title {
          margin: 20px 0 10px 0;

          span {
            margin-left: 20px;
            color: #999999;
            font-size: 13px;
          }
        }

        .detail_top {
          display: flex;
          justify-content: space-between;
          padding-bottom: 15px;
          align-items: center;

          .detail_top_Tabs {
            display: flex;
            font-size: 14px;

            div {
              margin-right: 20px;
              border-bottom: 4px solid transparent;
            }

            .selectType {
              color: #0486FE;
              border-bottom: 4px solid #0486FE;
            }
          }
        }
      }

    }
  }
}

::v-deep .el-table__header-wrapper {
  background-color: #f6f8ff;
}
</style>
<!-- 日期选择器样式 -->
<style lang="scss" scoped>
.screen_datepicker_action {
  ::v-deep .el-input__inner::before {
    content: '筛选时间';
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    text-align: center;
    color: #333333;
    font-size: 13px;
  }
}

::v-deep .el-input__icon.el-range__icon.el-icon-date {
  display: none;
}

::v-deep .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange.el-range-editor--small {
  padding-left: 70px;
}

.screen_datepicker {
  position: relative;
  width: 320px;
  height: 32px;
}

.screen_datepicker i {
  position: absolute;
  right: 5px;
  z-index: 7;
  color: black;
  line-height: 32px;
}
</style>